
<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="width:100%">
                <div style="float:left;width:100%">
                    <table style="font-size:12px;white-space: nowrap;width:100%" class="table1style" border="0">
                        <tr>
                            <td align="right" style="width:50px">日期</td>
                            <td v-for="(item,index) in preCondData" :key="index">
                                <div v-if="item.valuetype=='9'">
                                    <el-date-picker v-model="item.defaultvalue[0]" :type="item.dateformat=='1'?'datetime':'date'" placeholder="选择日期" :value-format="item.dateformat=='1'?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" :style="{ width:item.dateformat=='1'?'150px':'130px'}"></el-date-picker>-
                                    <el-date-picker v-model="item.defaultvalue[1]" :type="item.dateformat=='1'?'datetime':'date'" placeholder="选择日期" :value-format="item.dateformat=='1'?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" :style="{ width:item.dateformat=='1'?'150px':'130px'}"></el-date-picker>
                                </div>
                                <!-- <el-date-picker v-model="searchObj.startdt" :clearable="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:176px;">
                                </el-date-picker>
                                至
                                <el-date-picker v-model="searchObj.enddt" type="date" :clearable="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:176px;">
                                </el-date-picker> -->
                            </td>
                            <td align="right">
                                <el-button icon="el-icon-search" @click="btnQuery" type="primary">查询</el-button>
                                <!-- <el-button icon="el-icon-refresh" @click="btnClear">重置条件</el-button> -->
                                <el-button icon="el-icon-s-grid" @click="btnMoreCond">更多条件</el-button>
                                <el-dropdown style="padding-left: 5px;padding-right: 5px">
                                    <el-button icon="el-icon-document">导出</el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="btnExport('xlsx')">Excel</el-dropdown-item>
                                        <el-dropdown-item @click.native="btnExport('pdf')">PDF</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-button @click.native="btnExport('print')" icon="el-icon-printer">打印</el-button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="pagecenter">
            <div class="middle-center">
                <rm-layout-left splitcolor="white" movingcolor="#00ffff" :splitwidth=5 :fixsize=340 :minfixsize=80 :canDrag=true>
                    <template v-slot:fix>
                        <div style="border:1px solid #CCC;height:100%">
                            <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all @node-click="tree_click_event" ref="tree">
                            </el-tree>
                        </div>
                    </template>
                    <div style="height:100%;width:100%;text-align:center;border:1px solid #CCC;overflow:auto" v-loading="rightloading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                        <!-- <div v-html="htmlstr"></div> -->
                        <!-- <pdf v-for="i in pdfPages" :key="i" :src="url" :page="i"></pdf>去掉 vue-pdf的引用  功能待完成-->
                        <embed :src="htmlstr" type="application/pdf" width="100%" height="99%" :key="htmlstrkey">
                    </div>
                </rm-layout-left>
            </div>
        </div>

        <!--多选弹窗--->
        <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
            <rm-SqlMultiple :leftOption="LeftListOptions" :rightOption="RightListOptions" :name="fieldname" @change="closedialog"></rm-SqlMultiple>
        </el-dialog>

        <!--更多条件-->
        <el-dialog :visible.sync="diagPreCond" v-el-drag-dialog :close-on-click-modal="false" title="更多条件" width="500px">
            <div style="overflow:auto;text-align:center" v-if="preCondData.length>0">
                <table class="table1style" style="width:100%">
                    <tr v-for="(item,index) in preCondData" :key="index">
                        <td>{{item.colname}}</td>
                        <td style="color:red">{{item.condoperator}}</td>
                        <td style="width: 350px">
                            <!--1 checkbox-->
                            <div v-if="item.valuetype=='1'">
                                <el-checkbox true-label="1" false-label="0" v-model="item.defaultvalue"></el-checkbox>
                            </div>
                            <!--2 input-->
                            <div v-else-if="item.valuetype=='2'">
                                <el-input v-model="item.defaultvalue"></el-input>
                            </div>
                            <!--3 valuelist-->
                            <div v-else-if="item.valuetype=='3'">
                                <el-select v-model="item.defaultvalue" filterable style="width:158px">
                                    <el-option v-for="sitem in item.valuelist.split('|')" :key="sitem.split(' ')[0]" :label="
                                          item.substring(item.indexOf(' '))" :value="item.split(' ')[0]">
                                    </el-option>
                                </el-select>
                            </div>
                            <!--4 列表多选-->
                            <div v-else-if="item.valuetype=='4'">
                                <el-input v-model="item.defaultvalue" ref="refMutipleSelect" :key="1" placeholder="列表多选双击开窗" readonly @dblclick.native="DialogMutipleSelect(item.valuelist,item.defaultvalue,item.colcode,item.colname)">
                                    <el-button slot="append">选择</el-button>
                                </el-input>
                            </div>
                            <!--5 SQL-->
                            <div v-else-if="item.valuetype=='5'">
                                <rm_ddl_SqlSingle :sql="item.valuelist" :key="item.colcode" v-model="item.defaultvalue" ref="refSqlSingle" width="100%" :showselect="false" @change="SqlSingleChange" :keyid="item.colcode+'$'+item.statreportid">
                                </rm_ddl_SqlSingle>
                            </div>
                            <div v-else-if="item.valuetype=='7'">
                                <rm-ddl-rptunit prgno="LIS490" v-model="item.defaultvalue"></rm-ddl-rptunit>
                            </div>
                            <!--8 报告单元多选框-->
                            <div v-else-if="item.valuetype=='8'">
                                <!--包含两种，竖线分割以及sql语句-->
                                <el-input v-model="item.defaultvaluename" ref="refSql" :key="item.colcode" placeholder="多选双击开窗" readonly @dblclick.native="DialogSql(item)">
                                    <el-button slot="append" @click.native="DialogSql(item)">选择</el-button>
                                </el-input>
                            </div>
                            <div v-else-if="item.valuetype=='9'">
                                <el-date-picker v-model="item.defaultvalue[0]" :type="item.dateformat=='1'?'daretime':'date'" placeholder="选择日期" :value-format="item.dateformat=='1'?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" style="width:170px"></el-date-picker>-
                                <el-date-picker v-model="item.defaultvalue[1]" :type="item.dateformat=='1'?'daretime':'date'" placeholder="选择日期" :value-format="item.dateformat=='1'?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" style="width:170px">
                                </el-date-picker>
                            </div>
                            <!--6 SQL多选-->
                            <div v-else>
                                <el-input v-model="item.defaultvaluename" ref="refSql" :key="item.colcode" placeholder="SQL多选双击开窗" readonly @dblclick.native="DialogSql(item)">
                                    <el-button slot="append" @click.native="DialogSql(item)">选择</el-button>
                                </el-input>
                            </div>
                            <!--7 报告单元单选框-->

                        </td>
                    </tr>
                </table>
            </div>
            <div v-else>没有更多条件！</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveRecord">确 定</el-button>
                <el-button @click="diagPreCond = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
// import pdf from "vue-pdf";
export default {
    // components: {
    //     pdf
    // },
    name: "LIS640",
    data() {
        return {
            searchObj: {
                startdt: this.$pub.InitDate(),
                enddt: this.$pub.InitDate(),
                reportkind: ""
            },
            preCondData: [],
            oriPreCondData: [],
            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: false
            },
            keyLocalConfig: {
                isArrow: true
            },
            selectConfig: { tigger: "row", checkAll: true, reserve: true },
            selectRow: [],
            reqgroupOption: [],
            userno: this.$tool.getSession(this.$tool.loginuserno),
            data: [],
            defaultProps: {
                children: "children",
                label: "label"
            },
            htmlstr: "",
            htmlstrkey: 0,
            dialogMultipleVisible: false,
            LeftListOptions: [],
            RightListOptions: [],
            fieldname: "",
            multichktitle: "",
            diagPreCond: false,
            SqlTitle: "",
            rightloading: false,
            ChangeRow: {},
            rptunitOption: [],
            //pdf
            // pdfPages: 1,
            // url: "",
            // vuePdf: ""
        };
    },
    created() {
        // this.vuePdf = require("vue-pdf");
        if (this.$route.query.id) {
            this.GetTitle(this.$route.query.id);
        }
    },
    mounted() {},
    updated() {},
    computed: {},
    methods: {
        GetTitle(id) {
            this.$tool
                .request({
                    url: "LIS/LIS6/LIS640",
                    method: "post",
                    data: {
                        action: "getTitle",
                        titleid: id
                    }
                })
                .then(res => {
                    if (res.errcode == "1") {
                        if (res.tablename) {
                            this.$tool.setTitle(res.tablename);
                            this.searchObj.reportkind = res.reportkind;
                        } else {
                            this.$tool.setTitle("自定义报表" + id);
                        }
                    } else {
                        this.$tool.setTitle("自定义报表" + id);
                    }
                    this.InitTree(); //初始化树
                });
        },
        //树初始化
        InitTree() {
            this.$tool
                .request({
                    url: "LIS/LIS6/LIS640",
                    method: "post",
                    data: {
                        action: "InitTree",
                        ...this.searchObj
                    }
                })
                .then(res => {
                    if (!res.hasOwnProperty("errcode")) {
                        this.rptunitOption = res.rptunitOption;
                        res.kindlist.forEach((item, index) => {
                            let data = res.data.filter(m => m.reportkind == item.reportkind);
                            let kdata = { id: "id_" + index, label: item.reportkind };
                            if (data.length > 0) {
                                let tmp = [];
                                data.forEach(ele => {
                                    tmp.push({ id: ele.prgcode + "$" + ele.statreportid, label: ele.reportname });
                                });
                                kdata.children = tmp;
                            }
                            this.data.push(kdata);
                            //初始化不做查询;
                            let keyid = this.data[0].children[0].id;
                            if (keyid.indexOf("$") > -1) {
                                //表示子节点被点击
                                this.searchObj.prgcode = keyid.split("$")[0];
                                this.searchObj.statreportid = keyid.split("$")[1];
                                this.searchObj.type = "InitPage";
                                this.queryRight();
                            }
                        });
                    }
                })
                .catch(e => {
                    this.$alert(e, "出错");
                });
        },
        //预览
        previewData(StatColName, StatData, type) {
            this.rightloading = true;
            let str = "";
            if (StatData.length == 0) {
                this.$alert("当前查询条件未查询到数据，请更改查询条件后再试!", "提示");
                this.rightloading = false;
                return;
                str = StatColName;
            } else {
                str = JSON.stringify(StatColName);
                str += "\r";
                str += JSON.stringify(StatData);
            }

            let sql = btoa(encodeURIComponent(str));
            // this.$tool
            //     .request({
            //         url: "ucent/print",
            //         method: "post",
            //         data: {
            //             action: this.searchObj.type == "chart" ? "customprintview" : "PreviewCustomJson",
            //             styleid: this.searchObj.statreportid,
            //             sql: this.searchObj.type == "chart" ? sql : str,
            //             tablename: "chartreport"
            //         }
            //     })
            //     .then(res => {
            //         if (res == "获取报告预览数据出错！") res = "未查询到数据";
            //         this.htmlstr = res;
            //         this.rightloading = false;
            //     })
            //     .catch(e => {
            //         this.rightloading = false;
            //         this.$alert(e, "出错");
            //     });

            this.$tool
                .request({
                    url: "ucent/print",
                    method: "post",
                    data: {
                        action: "previewpdf",
                        styleid: this.searchObj.statreportid,
                        sql: str,
                        tablename: "report"
                    }
                })
                .then(res => {
                    if (res.flag == "0") {
                        this.$alert(res.msg, "提示");
                    } else {
                        var url = res.pdfurl;
                        // this.prePDFDialogShow(url);
                        //this.$bus.$emit("prePDFDialog", res.pdfurl);
                    }
                    this.rightloading = false;
                })
                .catch(e => {
                    this.$alert("预览报告出错！", "错误", {
                        confirmButtonText: "确定"
                    });
                    this.rightloading = false;
                });
        },
        //pdf preview
        // prePDFDialogShow(url) {
        //     this.url = pdf.createLoadingTask(url);
        //     this.url.promise.then(pdf => {
        //         this.pdfPages = pdf.numPages;
        //         //this.url = url;
        //     });
        // },

        btnExport(type) {
            this.searchObj.type = "queryRight";
            var urecdata = XEUtils.clone(this.preCondData, true);
            for (let i = 0; i < urecdata.length; i++) {
                if (urecdata[i].valuetype == "9") {
                    urecdata[i].defaultvalue = urecdata[i].defaultvalue[0] + "|" + urecdata[i].defaultvalue[1];
                }
            }
            this.$tool
                .request({
                    url: "LIS/LIS6/LIS640",
                    method: "post",
                    timeout: 600000,
                    data: {
                        action: "queryRight",
                        urec: urecdata,
                        ...this.searchObj
                    }
                })
                .then(res => {
                    //当前

                    if (res.errmsg != "") {
                        this.$alert(res.errmsg, "提示");
                    } else {
                        let StatColName = res.columns;
                        let StatData = res.datas;
                        let str = "";
                        if (StatData == "") {
                            str = StatColName;
                        } else {
                            str = JSON.stringify(StatColName);
                            str += "\r";
                            str += JSON.stringify(StatData);
                        }

                        //这里要取报表的名称
                        let reportname = res.reportname;
                        if (!reportname) reportname = "导出";
                        if (type == "xlsx") {
                            var p = { prgno: "ExportExcelCustomJson", styleid: this.searchObj.statreportid, sql: str, tablename: "report", reportname: reportname };
                            this.$pub.commexport(this, p, reportname + ".xlsx");
                        } else if (type == "pdf") {
                            let p = { prgno: "ExportPdfCustomJson", styleid: this.searchObj.statreportid, sql: str, tablename: "report", reportname: reportname };
                            this.$pub.commexport(this, p, reportname + ".pdf");
                        } else if (type == "print") {
                            let sql = btoa(encodeURIComponent(str));
                            //jsObj.SetCustomJsonPrintConfig(this.searchObj.statreportid, sql, this.userno, reportname);
                            jsObj.PrintCustomJsonReport(this.searchObj.statreportid, sql, this.userno, "report", "");
                        }
                    }
                })
                .catch(e => {
                    this.$alert(e, "出错");
                });
        },

        //子节点被点击
        tree_click_event(data, node, key) {
            let keyid = node.data.id;
            if (keyid.indexOf("$") > -1) {
                //横向查
                //表示子节点被点击
                this.searchObj.prgcode = keyid.split("$")[0]; //这个值是为了保持树的key唯一性
                this.searchObj.statreportid = keyid.split("$")[1];
                this.searchObj.type = "InitPage";
                this.queryRight();
            } else {
                //表示父节点被点击
                //console.log("parentnode");
            }
        },
        // //清除
        // btnClear() {
        //     this.searchObj = {
        //         startdt: this.$pub.InitDate(),
        //         enddt: this.$pub.InitDate(),
        //     };
        //     this.queryRight();
        // },
        //更多条件
        btnMoreCond() {
            this.diagPreCond = true;
        }, //更多条件确定
        saveRecord() {
            this.oriPreCondData.forEach(item => {
                let data = this.preCondData.find(m => m.statreportid == item.statreportid && m.colcode == item.colcode);
                if (!!data) {
                    item.condoperator = data.condoperator;
                    item.defaultvalue = data.defaultvalue;
                }
            });
            this.diagPreCond = false;
        },
        btnQuery() {
            this.searchObj.type = "queryRight";
            this.queryRight();
        },
        queryRight() {
            var urecdata = XEUtils.clone(this.preCondData, true);
            for (let i = 0; i < urecdata.length; i++) {
                if (urecdata[i].valuetype == "9") {
                    console.log("urec", urecdata[i]);
                    urecdata[i].defaultvalue = urecdata[i].defaultvalue[0] + "|" + urecdata[i].defaultvalue[1];
                }
            }
            this.$tool
                .request({
                    url: "LIS/LIS6/LIS640",
                    method: "post",
                    timeout: 600000,
                    data: {
                        action: "queryRight",
                        urec: urecdata,
                        ...this.searchObj
                    }
                })
                .then(res => {
                    //初始化查询(获取当前时间下默认条件的预览数据与更多条件初始化)
                    if (this.searchObj.type == "InitPage") {
                        if (res.errmsg != "") {
                            this.$alert(res.errmsg, "提示");
                        } else {
                            this.oriPreCondData = XEUtils.clone(res.preCondData, true);
                            this.preCondData = res.preCondData;

                            for (let j = 0; j < this.preCondData.length; j++) {
                                if (this.preCondData[j].valuetype == "9") {
                                    var newarr = this.preCondData[j].defaultvalue.split("|");
                                    this.preCondData[j].defaultvalue = newarr;
                                }
                            }
                            //this.previewData(res.columns, res.datas);
                            // if (res.datas.length == 0) {
                            //     this.$alert("没有获取到预览数据，请尝试增大日期区间或检查查询语句", "提示");
                            // }
                        }
                    } else {
                        //当前
                        if (res.errmsg != "") {
                            this.$alert(res.errmsg, "提示");
                        } else {
                            this.previewData(res.columns, res.datas);
                            if (res.datas.length == 0) {
                                this.$alert("没有获取到预览数据，请尝试增大日期区间或检查查询语句", "提示");
                            }
                        }
                    }
                })
                .catch(e => {
                    this.$alert(e, "出错");
                });
        },
        //多选弹窗关闭
        closedialog(value, code, valuename) {
            if (value != "close") {
                this.ChangeRow.defaultvalue = value;
                this.ChangeRow.defaultvaluename = valuename;
            }
            this.dialogMultipleVisible = false;
        },
        //sql多选弹窗
        DialogSql(item) {
            this.SqlTitle = item.colname;
            this.fieldname = item.colcode;
            this.multichktitle = item.colname;
            var rowlist = [];
            if (item.defaultvalue) rowlist = item.defaultvalue.split(",");
            this.ChangeRow = item;
            if (item.valuetype == "4") {
                var alloption = [];
                var alloptionlist = row.valuelist.split("|");
                for (let i = 0; i < alloptionlist.length; i++) {
                    alloption.push({ data: alloptionlist[i].split(" ")[0], display: alloptionlist[i].split(" ")[1], inputcode: "" });
                }
                if (rowlist.length > 0) {
                    this.LeftListOptions = alloption.filter(item => rowlist.indexOf(item.data) == -1);
                    this.RightListOptions = alloption.filter(item => rowlist.indexOf(item.data) > -1);
                } else {
                    this.LeftListOptions = alloption;
                    this.RightListOptions = [];
                }
            } else if (item.valuetype == "8") {
                this.LeftListOptions = this.rptunitOption.filter(item => rowlist.indexOf(item.data + "") == -1);
                this.RightListOptions = this.rptunitOption.filter(item => rowlist.indexOf(item.data + "") > -1);
            }
            this.dialogMultipleVisible = true;
        },
        //列表多选
        DialogMutipleSelect(data, chkdata, name, code, id) {
            this.fieldname = code;
            this.multichktitle = name;
            this.statreportid = id;
            let dataValue = data.split("|");
            this.RightListOptions = [];
            this.LeftListOptions = [];
            this.ListTableColumn = [{ field: "data", title: "代码", width: 120 }, { field: "display", title: "名称", width: 160 }];
            let thisvalue = chkdata.split(",");
            if (thisvalue.length > 0) {
                thisvalue.forEach(item => {
                    dataValue.forEach(element => {
                        var kvalue = element.split(" ");
                        if (kvalue[0] == item) {
                            this.RightListOptions.push({
                                display: kvalue[1],
                                data: kvalue[0]
                            });
                        }
                    });
                });
            }
            if (dataValue.length > 0) {
                dataValue.forEach(element => {
                    var kvalue = element.split(" ");
                    if (thisvalue.indexOf(kvalue[0]) < 0) {
                        this.LeftListOptions.push({
                            display: kvalue[1],
                            data: kvalue[0]
                        });
                    }
                });
            }
            this.dialogMultipleVisible = true;
        },
        //单选赋值
        SqlSingleChange(value, idcode) {
            let code = idcode.split("$")[0];
            let id = idcode.split("$")[1];
            this.SetValue(code, id, value, "", "dan");
        }, //赋值函数
        SetValue(code, id, value, valuename, type) {
            let data = this.preCondData.find(m => m.colcode == code && m.statreportid == id);
            if (!!data) {
                if (type == "duo") {
                    data.defaultvalue = value;
                    data.defaultvaluename = valuename;
                } else {
                    data.defaultvalue = value;
                }
            } else {
                this.$alert("请刷新重试", "出错");
            }
        }
    }
};
</script>

<style scoped>
.pagetop {
    width: 100%;
    left: 0;
    right: 0;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    height: 40px;
    overflow-x: auto;
    overflow-x: overlay;
}

.pagecenter {
    position: absolute;
    top: 45px;
    width: 100%;
    left: 0px;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.table1style tr td {
    padding: 0px 2px 0px 2px;
}

/deep/.myclass .vxe-table .vxe-footer--row.row-blue {
    background-color: #187;
    color: #fff;
}

::-webkit-scrollbar {
    width: 0px;
    height: 5px;
    border: 4px solid white;
}
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    display: block;
    border-style: solid;
    height: 5px;
    width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
    margin-right: 2px;
    border-width: 4px 4px 4px 0;
    border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
    margin-left: 2px;
    border-width: 4px 0 4px 4px;
    border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
    border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}
.operation-list {
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}
.table1style tr td {
    padding: 2px 3px 2px 3px;
}
::v-deep .el-input--suffix .el-input__inner {
    padding-right: 10px;
}
</style>